<template>
	<view class="bg" :style="{ background: 'url('+$_BASE_IMG_API+'/images/drawbg.png)  no-repeat','background-size': 'cover'}">
		<view class="flex flex-column align-center justify-center" style="padding-top: 326rpx;">
			<almost-lottery
			  :prizeList="prizeList"
			  :prizeIndex="prizeIndex"
				:lotteryBg="$_BASE_IMG_API+'/images/zhuanpan.png'"
				actionBg="./static/draw/button.png"
				:colors="['#fff68b', '#fff68b']"
				:strFontColors="['#FF302D', '#FF302D']"
				:strFontSize="30"
				:strMarginOutside="30"
				:imgMarginStr="30"
				:imgWidth="60"
				:imgHeight="70"
			  @reset-index="prizeIndex = -1"
			  @draw-start="handleDrawStart"
			  @draw-end="handleDrawEnd"
			  @finish="handleDrawFinish"
			  v-if="prizeList.length"
			/>
		</view>
		<view class="flex flex-column align-center justify-center u-m-t-50">
			<text style="color: #FFE30C;">剩余{{total}}次抽奖机会</text>
			<dy-button class="u-m-t-25" width="240rpx" size="medium" backgroundColor="#e24d07" @click="$refs.passPopup.open()">
				<text class="u-font-32">积分兑换次数</text>
			</dy-button>
		</view>
		<view class="position-fixed bottom-0 left-0 right-0 safe-bottom" style="background-color: #ff6c27;">
			<view class="flex align-center justify-evenly" style="height: 50px;">
				<dy-button width="200rpx" size="medium" backgroundColor="#e24d07" borderColor="#e24d07" @click="show = true">活动规则</dy-button>
				<dy-button width="200rpx" size="medium" backgroundColor="#e24d07" borderColor="#e24d07" @click="toMy">我的奖品</dy-button>
			</view>
		</view>
		<u-popup v-model="show" mode="bottom" closeable borderRadius="20">
			<u-parse class="u-p-30 u-m-t-40" :html="config.Lottery_rules" style="min-height: 50vh;overflow:hidden;" :tag-style="{ img: 'display: block'}" ></u-parse>
		</u-popup>
		<dy-pass-popup ref="passPopup" @confirm="confirm"></dy-pass-popup>
	</view>
</template>

<script>
	import { MineCenterApi } from '@/api/serves.js'
  import AlmostLottery from "../components/almost-lottery/components/almost-lottery/almost-lottery.vue"
	export default {
    components:{
      AlmostLottery
    },
		data() {
			return {
				// 奖品数据
				prizeList: [],
				// 中奖下标
				prizeIndex: -1,
				total: '',
				config: '',
				show: false,
				rewardInfo: '',
				isPrizing: false
			}
		},
		onLoad() {
			uni.showLoading()
			this._initDate()
			this.rules()
		},
		methods: {
			_initDate() {
				MineCenterApi.turntable().then(res => {
				  console.log('获取奖项列表', res);
				  if (res.code == 1) {
						let list = []
						this.total = res.data.total
						res.data.list.forEach(v=> {
							list.push({
								prizeId: v.id,
								prizeName: v.title,
								prizeStock: v.num,
								prizeWeight: v.percent,
								prizeImage: v.rewardimg,
							})
						})
						this.prizeList = list
						console.log(8998, this.prizeList);
				  }
				})
			},
			rules() {
				MineCenterApi.zhuanget_config().then(res => {
				  console.log('配置', res);
				  if (res.code == 1) {
						this.config = res.data.data
				  }
				})
			},
			confirm(pwd) {
				MineCenterApi.chouget_time({pwd}).then(res => {
				  console.log('获取机会', res);
				  if (res.code == 1) {
						this.$Toast('获取成功')
						this._initDate()
						this.$refs.passPopup.close()
				  }else {
						this.$Toast(res.msg)
					}
				})
			},
			toMy() {
				uni.navigateTo({
					url: '/pages/mine/mineBalance/winningRecord/winningRecord'
				})
			},
			// 本次抽奖开始
			handleDrawStart () {
				if(this.isPrizing) return
				this.isPrizing = true
				MineCenterApi.getreward().then(res => {
				  console.log('中奖产品', res);
				  if (res.code == 1) {
						this._initDate()
						this.rewardInfo = res.data
						for (let i in this.prizeList) {
							if(this.prizeList[i].prizeId == res.data.reward_id) {
								this.prizeIndex = i*1
								break
							}
						}
				  }
				})
			},
			// 本次抽奖结束
			handleDrawEnd () {
				this.isPrizing = false
				uni.showModal({
					title: '提示',
					content: this.rewardInfo.remark,
				});
			},
			// 抽奖转盘绘制完成
			handleDrawFinish (res) {
				// 抽奖转盘准备就绪后，这里处理你的逻辑
				// 请查看示例项目中的代码
				// console.log('抽奖转盘绘制完成', res)
				uni.hideLoading()
			}
		}
	}
</script>

<style lang="scss" scoped>
.bg {
	width: 100vw;
	height: calc(100vh - 44px);
	
}
</style>
